<template>
  <div>
    <el-container>
      <el-aside width="166px">
        <el-tabs type="border-card" style="height: 440px">
          <!-- 聊天 -->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-chat-line-round"></i></span>
            <!-- 空状态 -->
            <el-empty :image-size="100" v-show="false"></el-empty>
            <!-- 聊天列表 -->
            <div>
              <div
                style="
                  border: 1px solid rgba(0, 0, 0, 0.1);
                  padding: 5px;
                  margin-bottom: 10px;
                "
              >
                <el-avatar
                  size="small"
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                ></el-avatar>
                <span
                  style="text-align: center; font-size: 16px; margin-left: 5px"
                  >fxykkxx</span
                >
              </div>
              <div
                style="
                  border: 1px solid rgba(0, 0, 0, 0.1);
                  padding: 5px;
                  margin-bottom: 10px;
                "
              >
                <el-avatar
                  size="small"
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                ></el-avatar>
                <span
                  style="text-align: center; font-size: 16px; margin-left: 5px"
                  >fxykkxx</span
                >
              </div>
            </div>
          </el-tab-pane>
          <!-- 我的好友 -->
          <el-tab-pane
            ><span slot="label"><i class="el-icon-user-solid"></i></span>
            <el-menu :default-openeds="openeds">
              <el-submenu index="1">
                <template slot="title">
                  <span
                    >我的好友（{{ this.statusNow }}/{{ this.friendSum }}）</span
                  >
                </template>
                <el-menu-item-group>
                  <span slot="title">
                    <!-- div套点击事件 -->
                    <div
                      v-for="item in friendsDataList"
                      :key="item.id"
                      style="margin: 0 10px"
                      @click="chat(item)"
                      v-on:mouseover="changeActive($event)"
                      v-on:mouseout="removeActive($event)"
                    >
                      <el-avatar
                        size="small"
                        src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                      ></el-avatar>
                      <span style="padding-left: 6px">{{ item.username }}</span>
                    </div>
                  </span>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-tab-pane>
          <!-- 群聊 -->
          <el-tab-pane
            ><span slot="label"><i class="el-icon-s-help"></i></span
            >角色管理</el-tab-pane
          >
        </el-tabs>
      </el-aside>
      <el-main>
        <!-- 空状态 -->
        <el-empty :image-size="200" v-show="!chatVisible"></el-empty>
        <!-- 聊天页面 -->
        <div v-show="chatVisible">
          <!-- 上部对面id 图标界面-->
          <div style="border-bottom: 1px solid">
            <span style="font-size: 22px">{{ this.chatUSer }}</span>
            <div style="display: inline-block; float: right">
              <i
                class="el-icon-s-platform"
                style="font-size: 22px; margin: 0 3px"
              ></i>
              <i
                class="el-icon-video-camera"
                style="font-size: 22px; margin: 0 3px"
              ></i>
              <i
                class="el-icon-phone-outline"
                style="font-size: 22px; margin: 0 3px"
              ></i>
              <i
                class="el-icon-menu"
                style="font-size: 22px; margin: 0 3px"
              ></i>
            </div>
          </div>
          <!-- 中部聊天界面 -->
          <div style="height: 280px; border-bottom: 1px solid">
            <div
              style="overflow: hidden"
              v-for="item in msgList"
              :key="item.id"
            >
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                :class=chatBoxClass(item.sendid)
              ></el-avatar>
              <div
                :class=chatInfoClass(item.sendid)
              >
                <span>{{ item.info }}</span>
              </div>
            </div>
          </div>
          <!-- 下部发送信息界面 -->
          <div>
            <!-- 图标 -->
            <div>
              <i
                class="el-icon-star-off"
                style="font-size: 20px; margin: 0 2px"
              ></i>
              <i
                class="el-icon-picture-outline"
                style="font-size: 20px; margin: 0 2px"
              ></i>
              <i
                class="el-icon-folder-opened"
                style="font-size: 20px; margin: 0 2px"
              ></i>
              <i
                class="el-icon-video-camera"
                style="font-size: 20px; margin: 0 2px"
              ></i>
              <i
                class="el-icon-phone-outline"
                style="font-size: 20px; margin: 0 2px"
              ></i>
              <i class="el-icon-caret-top" style="float: right">历史纪录</i>
            </div>
            <!-- 发送信息 -->
            <div>
              <textarea
                col="5"
                style="
                  font-size: 16px;
                  width: 620px;
                  height: 68px;
                  padding: 2px;
                  outline: none;
                  resize: none;
                  border: 0;
                "
                v-model="inputMessage"
              />
              <button
                style="
                  height: 20px;
                  float: right;
                  background-color: #fff;
                  border: 1px solid;
                "
              >
                清空
              </button>
              <button style="height: 20px; float: right" @click="sendMessage">
                发送
              </button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MyChat",
  computed: {
    // 在线人数
    statusNow() {
      let n = 0;
      this.friendsDataList.forEach((item) => {
        if (!item.status) {
          n++;
        }
        // console.log(item);
      });
      return n;
    },
    // 好友总人数
    friendSum() {
      return this.friendsDataList.length;
    },
    // 聊天对象信息
    ...mapState({ chatUSer: "username", chatId: "id" }),
    sendId() {
      return window.sessionStorage.getItem("ID");
    },
    
  },
  data() {
    return {
      openeds: ["1"],
      friendsDataList: [],
      chatVisible: false,
      messages: [],
      inputMessage: "",
      msgList: [],
    };
  },
  methods: {
    async getData(id) {
      const { data: res } = await this.$http.get(`getid?id=${id}`);
      this.friendsDataList.push(res.data[0]);
    },
    // 获取好友列表 根据id获取对面id，在根据对面id获取用户名
    async getFriendsId() {
      const userid = window.sessionStorage.getItem("ID");
      const { data: res } = await this.$http.get(`getfriends?userid=${userid}`);
      res.data.forEach((item) => {
        this.getData(item.friendid);
      });
    },
    changeActive($event) {
      $event.currentTarget.className = "friend_box active";
    },
    removeActive($event) {
      $event.currentTarget.className = "";
    },
    // 单机头像实现聊天功能
    chat(data) {
      // console.log(1);
      this.chatVisible = true;
      this.$store.commit("chatData", data);
      this.getInfo();
    },
    sendMessage() {
      const message = {
        sendId: this.sendId,
        receiveId: this.chatId,
        info: this.inputMessage,
      };
      console.log(message);
      this.websocket.send(JSON.stringify(message));
      this.messages.push(this.inputMessage);
      this.inputMessage = "";
    },
    async getInfo() {
      const { data: res } = await this.$http.get(
        `getinfo?sendId=${this.sendId}&&receiveId=${this.chatId}`
      );
      // console.log(res);
      let n = res.data.length;
      for (let i = n - 1; i >= 0; i--) {
        this.msgList.push(res.data[i]);
      }
      // console.log(this.msgList);
    },
    chatBoxClass(id){
      return id==this.sendId?'right_chatBox':'left_chatBox'
    },
    chatInfoClass(id){
      return id==this.sendId?'right_chatInfo':'left_chatInfo'
    }
  },
  created() {
    this.getFriendsId();
  },
  mounted() {
    this.websocket = new WebSocket("ws://localhost:8888");
    // 获取发送者与接收者是否有历史消息（显示五条）查询id为发送者和id为接收者的数据，接受信息和id 根据id用不同的css
    // this.getInfo()
  },
};
</script>

<style scoped>
/deep/ .el-tabs__content {
  padding: 0 !important;
}
/deep/ .el-submenu__title {
  padding-left: 10px !important;
  line-height: 30px;
  height: 40px;
  font-size: 16px;
}

/deep/ .el-menu-item-group__title {
  padding-left: 0px !important;
}
.friend_box {
  padding: 2px 0;
  padding-left: 4px;
}
.active {
  border: 1px solid gray;
}
.left_chatBox {
  display: inline-block;
  margin-top: 5px;
  float: left;
}
.left_chatInfo {
  background-color: #00ccff;
  margin-left: 2px;
  display: inline-block;
  float: left;
  margin-top: 10px;
}
.right_chatBox {
  display: inline-block;
  margin-top: 5px;
  float: right;
}
.right_chatInfo {
  background-color: greenyellow;
  margin-right: 2px;
  display: inline-block;
  float: right;
  margin-top: 8px;
}
</style>